<template>
	<view class='partner statusBarHeight'>
		<view class="custom-nav-bar">
			<uni-icons type="left" size="24" color="#1f1f1fFF" @click="GoBack()"></uni-icons>
		</view>
		
		<scroll-view scroll-y="true" class='scroll-view-height'>
			<view class="info-box" v-for="item,index in userInfo" :key="index">
				<view class="header-container">
					<view class="header" :class="index === 0 ? 'header-bg' : ''"></view>
					<view class="header-container-box">
						<view class="value">
							您当前等级为
						</view>
						<view class="label">
							{{item.partnerName}}
						</view>
					</view>
					<image v-if="item.partnerName == '数康代言人'" src="@/static/mine/partner/partner-4.png"  class='level-icon' mode=""></image>
					<image v-else src="@/static/mine/partner/partner-3.png" class='level-icon' mode=""></image>
				</view>
				<view class="container">
					<view class="box">
						<view class="title">
							收益分红
						</view>
						<view class="date_box">
							<view class="box-item">
								<image src="@/static/mine/partner/partner-5.png" class='box-icon' mode=""></image>
								<view class="info">
									<view class="value">
										昨日
									</view>
									<view class="label">
										{{item.yesterdayRelease}}
									</view>
								</view>
							</view>
							<view class="box-item">
								<image src="@/static/mine/partner/partner-6.png" class='box-icon' mode=""></image>
								<view class="info">
									<view class="value">
										合计
									</view>
									<view class="label">
										{{item.releaseDividend}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import {
		getUserPartnerInfo
	} from "@/api/api.js"
	export default {
		name: 'partner',
		data() {
			return {
				type: 1,
				userInfo: []
			}
		},
		onLoad(e) {
			this.type = e.type
		},
		mounted() {
			this.handleGetUserPartnerlnfo()
		},
		methods: {
			handleGetUserPartnerlnfo() {
				getUserPartnerInfo().then(res => {
					this.userInfo = res.data.list
				})
			},
			GoBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.partner {
		width: 100%;
		min-height: 100vh;
		background: #F6F6FAFF;

		.custom-nav-bar {
			width: 100%;
			height: 88rpx;
			background: url('@/static/mine/partner/partner-1.png') no-repeat;
			background-size: 100% 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
		}
		
		.info-box {
			background-color: #FFFFFF;
			margin-bottom: 20rpx;
		}


.scroll-view-height{
	width: 100%;
	height: calc( 100vh -  100rpx);
}


		.header-container {
			height: 280rpx;
			padding: 60rpx 40rpx 0;
			box-sizing: border-box;
			position: relative;

			.header {
				width: 100%;
				height: 340rpx;
				position: absolute;
				top: 0rpx;
				left: 0;
			}
			
			.header-bg {
				background: url("@/static/mine/partner/partner-2.png") no-repeat;
				background-size: 100% 100%;
			}

			.header-container-box {
				.value {
					font-weight: 400;
					font-size: 28rpx;
					color: #43454D;
					line-height: 40rpx;
					margin-bottom: 16rpx;
				}

				.label {
					font-weight: 600;
					font-size: 56rpx;
					color: #151822;
				}
			}

			.level-icon {
				width: 200rpx;
				height: 232rpx;
				position: absolute;
				top: 28rpx;
				right: 60rpx;
			}
		}

		.container {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			align-items: center;

			.box {
				width: 710rpx;
				height: 268rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				padding: 28rpx 20rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;

				.title {
					font-weight: 500;
					font-size: 36rpx;
					color: #151822;
					margin-bottom: 28rpx;
				}

				.date_box {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.box-item {
						width: 324rpx;
						height: 134rpx;
						background: #F6F6FA;
						border-radius: 8rpx;
						padding: 20rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;

						.box-icon {
							width: 54rpx;
							height: 54rpx;
							margin-right: 20rpx;
						}

						.info {
							display: flex;
							flex-direction: column;

							.value {
								font-weight: 400;
								font-size: 28rpx;
								color: #151822;
								margin-bottom: 12rpx;
							}

							.label {
								font-weight: 500;
								font-size: 36rpx;
								color: #151822;
							}
						}
					}
				}
			}
		}

	}
</style>